<template>
  <div class="kefu-box" :class="customClass" v-click-move @click="goKefu">
    <NuxtImg src="/images/home/footer/kefuImg.png" />
    <p class="p1">{{ lang.custo_card_p1 }} 24/7</p>
    <p class="p2">{{ lang.custo_card_p2 }}</p>
    <p class="p3">{{ lang.custo_card_p3 }}</p>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("home");

defineProps({
  customClass: {
    type: String,
    default: "", // left-menu, home-footer
  },
});

function goKefu() {
  navigateTo({ name: "static-customer" });
}
</script>

<style scoped lang="scss">
.kefu-box {
  width: 100%;
  position: relative;
  img {
    width: 100%;
  }
  p {
    position: absolute;
  }
}
.p1 {
  color: #fff;
}
.p2 {
  color: #fcb7ff;
}
.p3 {
  color: #fff881;
}
.left-menu {
  .p1 {
    left: 22%;
    top: 20%;
    font-size: 0.38rem;
  }
  .p2 {
    left: 5%;
    bottom: 15%;
    font-size: 0.32rem;
    line-height: 0.44rem;
  }
  .p3 {
    right: 11%;
    top: 21.5%;
    font-size: 0.3rem;
  }
}
.home-footer {
  .p1 {
    left: 22%;
    top: 21.5%;
    font-size: 0.4rem;
  }
  .p2 {
    left: 5%;
    bottom: 15%;
    font-size: 0.36rem;
    line-height: 0.52rem;
  }
  .p3 {
    right: 11%;
    top: 21.5%;
    font-size: 0.36rem;
  }
}
</style>
